<template>
    <el-form ref="loginFrom" :model="loginFrom" label-width="auto" label-position="top" size="large" class="my-form"
        :rules="rules">
        <el-text type="primary" size="large">
            <h1 class="my-h1">登录账号</h1>
        </el-text>

        <el-menu :default-active="loginType" style="justify-content: center;margin-bottom: 15px;" mode="horizontal" >
            <el-menu-item index="1" @click="toLoginType('1')">用户名登录</el-menu-item>
            <el-menu-item index="2" @click="toLoginType('2')">邮箱登录</el-menu-item>
        </el-menu>

        <el-form-item label="用户名" prop="username" v-if="loginType === '1'">
            <el-input v-model="loginFrom.username" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email" v-else-if="loginType === '2'">
            <el-input v-model="loginFrom.email" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="loginFrom.password" show-password />
        </el-form-item>
        <el-form-item style="justify-content: center;">
            <el-button type="primary" @click="onSubmit()">登录</el-button>
            <el-button @click="resetForm()">重置</el-button>
            <el-link @click="toRegister" type="primary" style="margin-left: 30%;">没有账号？前往注册</el-link>
        </el-form-item>
    </el-form>
</template>

<script>
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { MD5 } from 'crypto-js';

axios.defaults.baseURL = '/api';

export default {
    data() {
        return {
            loginType: '1',
            loginFrom: {
                username: '',
                password: '',
                email: '',
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 15, message: '密码长度在 6 到 15 个字符之间', trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
                ],
                phone: [
                    { type: 'phone', message: '请输入正确的手机号', trigger: 'blur' }
                ]
            }
        }
    },

    methods: {
        resetForm() {
            this.loginFrom.username = '';
            this.loginFrom.password = '';
            this.loginFrom.email = '';
        },
        onSubmit() {
            this.$refs.loginFrom.validate((valid) => {
                if (valid) {
                    const data = {
                        username: this.loginFrom.username,
                        email: this.loginFrom.email,
                        password: MD5(this.loginFrom.password).toString(),
                    }
                    axios.post('/login', data)
                        .then((result) => {
                            if (result.data.code === 1) {
                                this.$cookies.set('token', result.data.data);
                                this.$store.state.isLogin = true;
                                this.$store.state.navActive = '/home';
                            } else {
                                ElMessage.info(result.data.msg)
                            }
                        })
                        .catch(err => {
                            if (err.response.status === 500) {
                                this.$store.state.isLogin = false;
                                ElMessage.error("无法连接后端服务器");
                                return;
                            }
                            console.log(err);
                            ElMessage.info("连接异常：" + err);
                        })
                } else {
                    ElMessage.info(" 有字段不符合要求 ");
                    return false;
                }
            });
        },
        toRegister() {
            this.$store.state.navActive = '/register';
        },
        toLoginType(index) {
            this.loginType = index;
        }

    }
}
</script>

<style scoped>
.my-h1 {
    color: #000;
    text-align: center;
    font-size: 28px;
}
.my-form {
    width: 50%;
    max-width: 400px;
    margin: 0 auto;
}
</style>